<span page-title ng-model="syncPlan">{{ 'Product Management for Sync Plan:' | translate }} {{ syncPlan.name }}</span>

<nav>
  <ul class="nav nav-tabs nav-tabs-pf">
    <li ng-class="{active: isState('sync-plan.products.list')}">
      <a ui-sref="sync-plan.products.list">
        <span translate>List/Remove</span>
      </a>
    </li>

    <li ng-class="{active: isState('sync-plan.products.add')}"
        ng-show="permitted('edit_sync_plans', syncPlan)">
      <a ui-sref="sync-plan.products.add">
        <span translate>Add</span>
      </a>
    </li>
  </ul>
</nav>

<div data-extend-template="layouts/partials/table.html">
  <div data-block="list-actions">
    <button ng-if="isState('sync-plan.products.list')"
            type="button"
            class="btn btn-default"
            ng-hide="denied('edit_products')"
            ng-disabled="table.numSelected == 0 || table.working"
            ng-click="removeProducts()">
      <span translate>Remove Selected</span>
    </button>
    <button ng-if="isState('sync-plan.products.add')"
            type="button"
            class="btn btn-default"
            ng-hide="denied('edit_products')"
            ng-disabled="table.numSelected == 0 || table.working"
            ng-click="addProducts()">
      <span translate>Add Selected</span>
    </button>
  </div>

  <span data-block="no-rows-message">
    <span ng-if="isState('sync-plan.products.list')" translate>
      No products are have been added to this Sync Plan.
    </span>
    <span ng-if="isState('sync-plan.products.add')" translate>
      No products are available to add to this Sync Plan.
    </span>
  </span>

  <div data-block="table">
    <table ng-class="{'table-mask': table.working}" class="table table-bordered table-striped">
      <thead>
        <tr bst-table-head row-select="product">
          <th bst-table-column="name" translate>Name</th>
          <th bst-table-column="description" translate>Description</th>
          <th bst-table-column="sync_status" translate>Sync Status</th>
          <th bst-table-column class="number-cell"><span translate>Repositories</span></th>
        </tr>
      </thead>

      <tbody>
        <tr bst-table-row ng-repeat="product in table.rows" row-select="product">
          <td bst-table-cell>
            <a ui-sref="product.info({productId: product.id})">
              {{ product.name }}
            </a>
          </td>
          <td bst-table-cell>{{ product.description }}</td>
          <td bst-table-cell>
            <div ng-include="'products/views/partials/product-table-sync-status.html'"></div>
          </td>
          <td bst-table-cell class="number-cell">{{ product.repository_count }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
